<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>{{ dataForm.ruleId ? '编辑平台规则' : '新增平台规则' }}</h2>
        <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
      </div>
      <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
        <el-row>
          <el-form-item prop="ruleType" label="规则类型">
            <el-select v-model="dataForm.ruleType" placeholder="请选择规则类型" clearable>
              <el-option v-for="item in ruleTypeList" :value="item.value" :label="item.label" :key="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="ruleName" label="规则名称">
            <el-input type="text" v-model="dataForm.ruleName"></el-input>
          </el-form-item>

          <el-form-item prop="remark" label="备注">
            <el-input type="textarea" v-model="dataForm.remark"></el-input>
          </el-form-item>
        </el-row>

        <div class="tit">
          <h2>关联信息</h2>
        </div>
        <el-row>
          <el-form-item prop="goodsCodes" label="产品编号（多个以逗号隔开）" v-if="dataForm.ruleType == 3">
            <el-input type="textarea" v-model="dataForm.goodsCodes"></el-input>
          </el-form-item>

          <el-form-item prop="ruleIds" label="产品分类" v-if="dataForm.ruleType == 2">
            <!-- <el-select v-model="dataForm.classifyIds" multiple filterable
                       placeholder="请选择产品分类" clearable>
              <el-option
                v-for="item in classifyList"
                :value="item.id"
                :label="item.name"
                :key="item.id"
                :disabled="item.existFlag?true:false">
              </el-option>
            </el-select> -->

            <el-cascader v-model="dataForm.classifyIds" placeholder="请选择产品分类" :options="classifyList"
              :props="{ multiple: true, value: 'id', label: 'name', emitPath: false }" clearable
              :show-all-levels="false"></el-cascader>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item>
            <el-button plain type="primary" @click="sureClick">保 存</el-button>
            <el-button plain @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

  </div>
</template>

<script>
import * as message from "@/constants/message";
import RuleApi from '@/api/system/rule';
import ServerClassifyApi from "@/api/server/serverClassify"

export default {
  data() {
    return {
      dataForm: {
        ruleId: "",
        ruleName: "",
        ruleType: "",
        goodsCodes: "",
        classifyIds: [],
        remark: "",
      },
      attrList: [],
      classifyList: [],
      ruleTypeList: [
        { value: 1, label: '通用规则' },
        { value: 2, label: '分类规则' },
        { value: 3, label: '产品规则' },
      ],
      roleRules: {
        ruleName: [
          { required: true, message: "请输入规则名字", trigger: "focus" }
        ],
        ruleType: [
          { required: true, message: "请选择规则类型", trigger: "change" }
        ]
      },
      showBindAttr: false
    }
  },
  components: {
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (this.$route.query.id) {
        this.dataForm.ruleId = this.$route.query.id
        this.getData()
      }
      this.getClassifyList()
    },
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },
    getData() {
      RuleApi.getRuleInfo({
        id: this.dataForm.ruleId
      }).then(res => {
        this.$Utils.bindingBean(this.dataForm, res.data)
        if (res.data.goodsList) {
          this.dataForm.goodsCodes = res.data.goodsList.map(item => item.goodsCode).join(",")
        }
        if (res.data.classifyIds) {
          this.dataForm.classifyIds = res.data.classifyIds
        }
        if (res.data.attrList) {
          this.attrList = res.data.attrList
        }
        console.log(this.dataForm)
      })
    },
    getClassifyList() {
      const { ruleId } = this.dataForm
      let param = { level: 2, ruleId: ruleId ? ruleId : 0 }
      ServerClassifyApi.listServerClassifyTree(param).then(res => {
        this.classifyList = res.data
      })
    },
    sureClick() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
            .then(() => {
              if (this.dataForm.goodsCodes) {
                let reg2 = /，/g
                this.dataForm.goodsCodes = this.dataForm.goodsCodes.replace(reg2, ",")
              }
              if (this.dataForm.ruleId) {
                this.editData();
              } else {
                this.addData();
              }
            });
        }
      })
    },
    addData() {
      let param = {
        ruleName: this.dataForm.ruleName,
        ruleType: this.dataForm.ruleType,
        goodsCodes: this.dataForm.goodsCodes,
        classifyIds: this.dataForm.classifyIds,
        remark: this.dataForm.remark,
      };
      RuleApi.addRule(param).then(res => {
        this.$Utils.notifySuccess()
        this.returnList();
      })
    },
    editData() {
      let param = {
        ruleId: this.dataForm.ruleId,
        ruleName: this.dataForm.ruleName,
        ruleType: this.dataForm.ruleType,
        goodsCodes: this.dataForm.goodsCodes,
        classifyIds: this.dataForm.classifyIds,
        remark: this.dataForm.remark,
      };
      RuleApi.editRule(param)
        .then(data => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/sys/ruleManagement' });
    }
  },

}
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

<style lang="scss" scoped>
.upload-img {
  &::v-deep .el-upload-dragger {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .tip {
      padding-bottom: 30px;
    }
  }
}
</style>

